<template>
  <div id="FlexForTodoList">
    <!--
        三、任务
        在 todolist 的基础上，完成一个三列布局，左右两侧宽度固定，中间弹性，高度为整个浏览器，颜色样式自己设置
      -->

    <div class="left"></div>
    <div class="main">
      <todo-list />
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
import TodoList from "./TodoList.vue";
export default {
  name: "FlexForTodoList",
  components: {
    TodoList,
  },
};
</script>

<style>
#FlexForTodoList {
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 200px;
  background-color: #555b63;
}
.main {
  flex: 1;
}
.right {
  width: 200px;
  background-color: #edeced;
}
</style>